import React from 'react';
import { Icon, Upload, } from 'antd'

/**
 * 图片上传组件
 * @param {number} maxLoad 最大上传图片数量 
 * @param {Array | String} imageUrl 默认图片列表
 */
const UploadPic = (props) => {
  const { imageUrl, maxLoad } = props

  const uploadButton = (
    <div>
      <Icon type={'plus'} />
      <div className="ant-upload-text">Upload</div>
    </div>
  );

  const fileList = () => {
    const res = []
    if (typeof imageUrl == 'string') {
      res.push({
        url: imageUrl,
        uid: '-5',
        name: 'image.png',
      })
    }
    if (typeof imageUrl == 'object') {
      imageUrl.map(i => res.push({
        url: i.original,
        uid: i.id,
        name: i.title,
      }))
    }
    return res
  }

  const beforeUpload = async (file, fileList) => {

    console.log(file, fileList)

  };
  return (
    <Upload
      listType="picture-card"
      fileList={fileList()}
      beforeUpload={beforeUpload}
      data={{
        albumName: '临时相册',
        albumIsPlatform: true,
      }}
      headers={{
        'token': '1f763f2810d24a86b68d1dc862367ec4',
      }}
      {...props}
    >
      {fileList().length >= maxLoad ? null : uploadButton}
    </Upload>
  )
}

export default UploadPic;
